<!--
 * @Author: yuanweijiang
 * @Date: 2024-01-04 10:08:05
 * @LastEditors: yuanweijiang
-->
<template>
	<el-dialog :title="title" width="500" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true" draggable>
		<el-form ref="menuDialogFormRef" :model="form" :rules="rules" label-width="90px">
			<el-form-item label="项目ID" prop="wokeSpaceName">
				<el-input
					v-model.trim="form.wokeSpaceName"
					@input="handleInput"
					clearable
					placeholder="只能输入英文和下划线"
					:disabled="title !== '新建项目'"
				></el-input>
			</el-form-item>
			<el-form-item label="项目名称" prop="projectNameCh">
				<el-input v-model.trim="form.projectNameCh" clearable placeholder="请输入项目名称"></el-input>
			</el-form-item>
			<div class="flex mb-4">
				<div>
					<el-form-item label="是否启用" prop="isdo">
						<el-switch v-model="form.onEnable" />
					</el-form-item>
				</div>
				<div class="ml-4">
					<el-form-item label="是否默认" prop="mr">
						<el-switch v-model="form.defaultStr" />
					</el-form-item>
				</div>
			</div>
			<el-form-item label="项目说明" prop="wokeSpaceBack">
				<el-input v-model.trim="form.wokeSpaceBack" clearable placeholder="请输入"></el-input>
			</el-form-item>
			<div class="text-center">
				<el-button type="primary" @click="onSubmit(menuDialogFormRef)">{{ title === '新建项目' ? '发布' : '修改' }}</el-button>
			</div>
		</el-form>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { addPost, editPost } from '/@/api/project';
import { useMessage } from '/@/hooks/message';
import { useUserInfo } from '/@/stores/userInfo';
const visible = ref(false);
const menuDialogFormRef = ref('');
const emit = defineEmits(['refresh']);
const title = ref('');
const oldWokeSpaceName = ref('');
const form = ref({
	wokeSpaceName: '',
	onEnable: true,
	projectNameCh: '',
	defaultStr: false,
	wokeSpaceBack: '',
});
const rules = ref({
	wokeSpaceName: [{ required: true, message: '不能为空', trigger: 'blur' }],
	projectNameCh: [{ required: true, message: '不能为空', trigger: 'blur' }],
	prodescription: [{ required: true, message: '不能为空', trigger: 'blur' }],
});

//限制名称只能是英文
const handleInput = (e) => {
	const regex = /^[a-zA-Z_]+$/;
	if (!regex.test(form.value.wokeSpaceName)) {
		// 输入不符合要求，进行处理
		// 或者可以禁止用户输入非英文字符
		form.value.wokeSpaceName = form.value.wokeSpaceName.replace(/[^a-zA-Z_]/g, '');
	}
};
//表单提交
const onSubmit = async (forms) => {
	await forms.validate((valid) => {
		if (valid) {
			if (title.value === '新建项目') {
				addPost(form.value)
					.then((res) => {
						if (res.data) {
							useMessage().success('发布成功');
							visible.value = false;
							reset();
							emit('refresh');
						}
					})
					.catch((res) => {
						console.log('重复添加');

						useMessage().error(res.msg);
					});
			} else {
				const { defaultStr, onEnable, wokeSpaceBack, projectNameCh } = form.value;
				editPost({
					oldWokeSpaceName: oldWokeSpaceName.value,
					newWokeSpaceName: form.value.wokeSpaceName,
					defaultStr,
					onEnable,
					wokeSpaceBack,
					projectNameCh,
				}).then((res) => {
					if (res.msg == 'ok') {
						useMessage().success('修改成功');
						visible.value = false;
						reset();
						emit('refresh');
					}
				});
			}

			// 更新上下文的 user信息
			useUserInfo().setUserInfos();
		}
	});
};
//重置表单
const reset = () => {
	form.value = {
		wokeSpaceName: '',
		onEnable: true,
		defaultStr: false,
		wokeSpaceBack: '',
	};
};
function openDialog() {
	visible.value = true;
}
defineExpose({
	openDialog,
	form,
	title,
	oldWokeSpaceName,
});
</script>
<style scoped lang="scss"></style>
